<template>
  <div class="cardList">
    <a-input
      style="margin-bottom: 8px"
      :allow-clear="true"
      class="custom-input"
      v-model="localQuery"
      :placeholder="placeholder"
    >
      <template #suffix>
        <a-tooltip>
          <template #content>搜索</template>
          <span v-if="!localQuery" style="color: var(--color-text-3)">🔍</span>
        </a-tooltip>
      </template>
    </a-input>

    <div class="scroll-container" v-if="items && items.length">
      <div
        v-for="(item, index) in filteredItems"
        :key="itemKey(item, index)"
        class="card"
        :style="{ margin: index === 0 ? '0px 0px 8px 0px' : '8px 0px' }"
        :class="{ active: getId(item) === selectedId }"
        @click="onSelect(item)"
      >
        <!-- 标题行 + 备注 -->
        <div>
          <ul style="display: flex">
            <li>
              <span>
                <img
                  style="width: 20px; height: 20px; margin-right: 5px"
                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
                />
              </span>
              <div style="font-size: 16px; font-weight: bold; color: var(--color-text-1); min-width: 0; max-width: 100%">
                <OverflowText
                  style="font-weight: 500"
                  :text="titleFormatter(item)"
                  :maxWidth="''"
                />
              </div>
            </li>
            <li>
              <div>
                <a-tooltip v-if="hasTip(item)" placement="top" :content="String(getTip(item))">
                  <div class="iconRemark" style="width: 20px; height: 20px; padding: 3px; display: flex; margin-top: 1px">
                    <svg class="icon" style="font-size: 14px; color: var(--color-text-2)" aria-hidden="true">
                      <use xlink:href="#icon-beizhu"></use>
                    </svg>
                  </div>
                </a-tooltip>
              </div>
            </li>
          </ul>
        </div>

        <!-- tag 列表 -->
        <div v-if="getTag(item)">
          <span style="display: flex; margin: 0px; padding: 3px" v-for="(value, key, tagindex) in parsedTag(item)" :key="tagindex">
            <OverflowText
              style="font-size: 13px; color: var(--color-text-2); font-size: 14px"
              :text="String(key)"
              :maxWidth="'85px'"
            />:
            <OverflowText
              style="color: var(--color-text-1); padding-left: 5px; font-size: 14px; flex: 1; min-width: 0"
              :text="String(value)"
              :maxWidth="''"
            />
          </span>
        </div>

        <!-- 底部信息行 -->
        <div>
          <ul style="display: flex; height: 23px">
            <li>
              <div class="syletag">
                <OverflowText
                  style="background: var(--color-fill-4); color: var(--color-text-1)"
                  :text="getNodeName(item)"
                  :maxWidth="'130px'"
                />
              </div>
            </li>
            <li>
              <div class="limited-container" style="color: var(--color-text-3); font-size: 12px; line-height: 20px">
                <p v-if="getNodeName(item)">
                  <span>
                    {{ shortNodeName(item) ? '发起时间' : '' }} {{ dateFormatter(getCreateTime(item)) }}
                  </span>
                </p>
                <p v-else>
                  <span>发起时间: {{ dateFormatter(getCreateTime(item)) }}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div v-else style="color: var(--color-text-3); text-align: center; margin-top: 100px">暂无数据</div>
  </div>
</template>

<script setup lang="ts">
import { computed, watch, ref } from 'vue'
import OverflowText from '@/views/dashboard/workplace/OverflowText.vue'

// Props
interface TaskItem {
  [key: string]: any
}

const props = defineProps<{
  items: TaskItem[]
  selectedId?: string | number | null
  query?: string
  placeholder?: string
  // 提供外部格式化函数以复用既有逻辑
  titleFormatter: (item: TaskItem) => string
  dateFormatter: (val: any) => string
  getId: (item: TaskItem) => string | number
  getTip?: (item: TaskItem) => any
  getTag?: (item: TaskItem) => any
  parsedTag?: (item: TaskItem) => Record<string, any>
  getNodeName?: (item: TaskItem) => string
  getCreateTime?: (item: TaskItem) => any
}>()

const emit = defineEmits<{
  (e: 'update:query', val: string): void
  (e: 'select', item: TaskItem): void
}>()

const localQuery = ref(props.query ?? '')
watch(
  () => props.query,
  v => {
    if (v !== undefined && v !== localQuery.value) localQuery.value = v as string
  }
)
watch(localQuery, v => emit('update:query', v))

const filteredItems = computed(() => {
  // 交由上层传入经过过滤的 items，这里只保持简单回显
  return props.items || []
})

const itemKey = (item: TaskItem, index: number) => props.getId?.(item) ?? index
const hasTip = (item: TaskItem) => !!props.getTip?.(item)

function onSelect(item: TaskItem) {
  const id = props.getId(item)
  if (id !== props.selectedId) emit('select', item)
}

function shortNodeName(item: TaskItem) {
  const v = props.getNodeName?.(item)
  if (!v) return false
  return JSON.stringify(v).length < 9
}
</script>
